<template>
    <div class="container">
        <div class="slider">
            <Menu active-name="1" @on-select="selectMenu">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-analytics" />
                        用户管理
                    </template>
                    <MenuItem name="/dashboard/user">用户列表</MenuItem>
                    <MenuItem name="/dashboard/vip">会员管理</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-analytics" />
                        订单管理
                    </template>
                    <MenuItem name="/dashboard/order">订单列表</MenuItem>
                </Submenu>
            </Menu>
        </div>
        <div class="content">
            <div class="head">

            </div>
            <div class="wrap">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
      methods:{
        selectMenu(name) {
          this.$router.push(name);
        }
      }
    }
</script>
<style lang="less">
    .container{
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .slider{
            /*width: 300px;*/
            height: 100%;
            /*overflow: scroll;*/
        }
        .content{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            height: 100%;
            .head{
                height: 45px;
                border-bottom: 1px solid #ccc;
            }
            .wrap{
                flex: 1;
            }
        }
    }
</style>












